<!--
 * @Description: 用户注册组件
 * @Author: hai-27
 * @Date: 2020-02-19 22:20:35
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-01 15:34:34
 -->
<template>
  <div id="register">
    <el-dialog title="注册" width="300px" center :visible.sync="isRegister">
      <el-form :model="RegisterUser" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">
        <!-- 用户名 -->
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="RegisterUser.name"
            @blur="validateName"></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="pass">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="请输入密码" v-model="RegisterUser.pass"></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="confirmPass">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="请再次输入密码"
            v-model="RegisterUser.confirmPass"></el-input>
        </el-form-item>

        <!-- 输入手机号 -->
        <el-form-item prop="mobile">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入手机号" v-model="RegisterUser.mobile"></el-input>
        </el-form-item>

        <!-- 增加的内容 -->
        <el-form-item prop='imageCode'>
          <!-- 图片验证码 -->
          <el-input placeholder="输入验证码" v-model="RegisterUser.imageCode" :style="{ width: '60%' }"></el-input>
          <img class='imageCode' :src="'http://127.0.0.1:8000/user/code/' + this.uuid + '/'" alt="图形验证码"
            @click="create_uuid">
        </el-form-item>
        <!-- 是否同意商城协议 -->
        <el-form-item prop='aggreement'>
          <el-checkbox v-model="aggree">
            <label class='aggreement'>同意'商城用户使用协议'</label>
          </el-checkbox><br>
          <span class="error_tip" v-show="flag">请勾选用户协议</span>
        </el-form-item>

        <!-- 点击注册 -->
        <el-form-item>
          <el-button size="medium" type="primary" @click="Register" style="width: 100%">注册</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
import { v4 as uuid4 } from "uuid"
export default {
  name: "MyRegister",
  props: ["register"],
  data() {

    return {
      imageCodeID: "",//即生成的uuid
      iamgeCodeUrl: "", //图形验证码的地址
      isRegister: false, // 控制注册组件是否显示
      aggree: false,//是否同意协议
      flag: false, //控制勾选协议的提示
      uuid: "",
      // 返回的是注册用户信息
      RegisterUser: {
        name: "",
        pass: "",
        confirmPass: "",
        mobile: "",
        imageCode: "",//用户输入的图片验证码
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
        // 这里的属性值，是prop的值

      },
    };
  },

  watch: {
    // 监听父组件传过来的register变量，设置this.isRegister的值
    register: function (val) {
      if (val) {
        this.isRegister = val;
      }
    },
    // 监听this.isRegister变量的值，更新父组件register变量的值
    isRegister: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
        this.$emit("fromChild", val);
      }
    },
  },
  mounted() {
    // DOM节点刚刚完成挂载，生成默认的图形验证码
    this.create_uuid()
  },

  methods: {

    create_uuid() {
      this.uuid = uuid4()
    },

    validateName() {
      console.log("去校验用户名");

      this.$axios.get("/user/check/username/?name=" + this.RegisterUser.name).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.msg)
        }
      })

    },

    // 用户注册
    Register() {
      this.$axios.post("/user/reg/", {
        "username": this.RegisterUser.name,
        "password": this.RegisterUser.pass,
        "password2": this.RegisterUser.confirmPass,
        "mobile": this.RegisterUser.mobile,
        "code": this.RegisterUser.imageCode,
        "uuid": this.uuid,
      }).then(res => {
        console.log(res, `res`);
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.isRegister = false
        } else {
          this.$message.error(res.data.msg)
        }
      })

    },
  },
};
</script>


<style>
.imageCode {
  /* padding-top:2%; */
  margin-bottom: -12px;
  width: 95px;
  height: 35px;
}

.aggreement {
  font-size: 10px;
  color: blue;
}

.error_tip {
  font-size: 3px;
  color: red;
}
</style>